<template>
  <div class="panel">
    <div class="left"></div>
    <div class="right">
      <!-- <a-button type="primary" class="to-home" >首页</a-button> -->

      <div class="flex-1">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>
<style scoped lang="less">
.panel {
  display: flex;
  height: 100vh;
  .left {
    flex: 1;
    background: url("~/assets/images/login_bcg.jpg") no-repeat;
    background-size: cover;
    padding: 30px;
  }
  .right {
    height: 100%;
    width: 640px;
    box-sizing: border-box;
    padding: 0 53px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    .to-home {
      position: absolute;
      top: 10px;
      left: 53px;
    }
  }
}


@media screen and (max-width: 768px) {
  .panel {
    display: block;
  }
}
</style>
